<template>
  <y-dialog
    @open="open"
    @close="close"
    @fullscreenChange="fullscreenChange"
    width="1000px"
    append-to-body
  >
    <el-row v-if="props.level === '0'" :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div
          ref="caseContainer"
          style="height: 100%; min-height: 300px; width: 100%"
        ></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div
          ref="caseAnalysisContainer"
          style="height: 100%; min-height: 300px; width: 100%"
        ></div>
      </el-col>
    </el-row>
    <el-row v-else :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div
          ref="stepContainer"
          style="height: 100%; min-height: 300px; width: 100%"
        ></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div
          ref="stepAnalysisContainer"
          style="height: 100%; min-height: 300px; width: 100%"
        ></div>
      </el-col>
    </el-row>
    <el-row>
      <div
        ref="resultContainer"
        style="height: 100%; min-height: 300px; width: 100%"
      ></div>
    </el-row>
  </y-dialog>
</template>

<script setup name="Statistic">
import * as echarts from "echarts";
import { getExecutionJobResult } from "@/api/tms/job/execution";

const { proxy } = getCurrentInstance();

var caseChat = null;
var stepChat = null;
var caseAnalysisChat = null;
var stepAnalysisChat = null;
var resultChat = null;
const resultData = ref([]);

const props = defineProps({
  id: { type: String, default: "" },
  level: { type: String, default: "0" },
});

/** 打开对话框事件 */
function open() {
  getExecutionJobResult(props.id)
    .then((res) => {
      resultData.value = res.data;
    })
    .then(() => {
      if (props.level === "0") {
        initCaseChart();
        initCaseAnalysisChat();
      } else {
        initStepChart();
        initStepAnalysisChat();
      }
      initResultChart();
    });
}

/** 关闭对话框事件 */
function close() {
  if (caseChat) {
    caseChat.dispose();
  }
  if (stepChat) {
    stepChat.dispose();
  }
  if (caseAnalysisChat) {
    caseAnalysisChat.dispose();
  }
  if (stepAnalysisChat) {
    stepAnalysisChat.dispose();
  }
  if (resultChat) {
    resultChat.dispose();
  }
}

/** 添加/修改对象后触发事件 */
function fullscreenChange() {
  close();
  open();
}

/** 初始化分析统计数据 */
function initCaseChart() {
  caseChat = echarts.init(proxy.$refs.caseContainer);
  caseChat.setOption({
    title: {
      text: "用例统计",
      subtext: resultData.value["cases"]["summary"],
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "执行状态",
        type: "pie",
        radius: "50%",
        data: [
          { value: resultData.value["cases"]["norun"], name: "未执行" },
          { value: resultData.value["cases"]["pass"], name: "成功" },
          { value: resultData.value["cases"]["block"], name: "阻塞" },
          { value: resultData.value["cases"]["fail"], name: "失败" },
          { value: resultData.value["cases"]["running"], name: "执行中" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
}

/** 初始化分析统计数据 */
function initStepChart() {
  stepChat = echarts.init(proxy.$refs.stepContainer);
  stepChat.setOption({
    title: {
      text: "步骤统计",
      subtext: resultData.value["steps"]["summary"],
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "执行状态",
        type: "pie",
        radius: "50%",
        data: [
          { value: resultData.value["steps"]["norun"], name: "未执行" },
          { value: resultData.value["steps"]["pass"], name: "成功" },
          { value: resultData.value["steps"]["block"], name: "阻塞" },
          { value: resultData.value["steps"]["fail"], name: "失败" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
}

/** 初始化用例分析统计数据 */
function initCaseAnalysisChat() {
  caseAnalysisChat = echarts.init(proxy.$refs.caseAnalysisContainer);
  caseAnalysisChat.setOption({
    title: {
      text: "用例分析",
      subtext: resultData.value["case_analysis"]["summary"],
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "分析状态",
        type: "pie",
        radius: "50%",
        data: [
          { value: resultData.value["case_analysis"]["todo"], name: "待分析" },
          { value: resultData.value["case_analysis"]["env"], name: "环境问题" },
          {
            value: resultData.value["case_analysis"]["case"],
            name: "用例问题",
          },
          {
            value: resultData.value["case_analysis"]["script"],
            name: "脚本问题",
          },
          { value: resultData.value["case_analysis"]["bug"], name: "产品缺陷" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
}

/** 初始化步骤分析统计数据 */
function initStepAnalysisChat() {
  stepAnalysisChat = echarts.init(proxy.$refs.stepAnalysisContainer);
  stepAnalysisChat.setOption({
    title: {
      text: "步骤分析",
      subtext: resultData.value["step_analysis"]["summary"],
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "分析状态",
        type: "pie",
        radius: "50%",
        data: [
          { value: resultData.value["step_analysis"]["todo"], name: "待分析" },
          { value: resultData.value["step_analysis"]["env"], name: "环境问题" },
          {
            value: resultData.value["step_analysis"]["case"],
            name: "用例问题",
          },
          {
            value: resultData.value["step_analysis"]["script"],
            name: "脚本问题",
          },
          { value: resultData.value["step_analysis"]["bug"], name: "产品缺陷" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
}

/** 初始化测试用例执行结果数据 */
function initResultChart() {
  resultChat = echarts.init(proxy.$refs.resultContainer);
  resultChat.setOption({
    title: {
      text: "执行结果",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      top: "10%",
      left: "center",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: resultData.value["number"],
        axisLabel: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "成功",
        type: "bar",
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        data: resultData.value["pass"],
        itemStyle: {
          color: "green",
        },
      },
      {
        name: "失败",
        type: "bar",
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        data: resultData.value["fail"],
        itemStyle: {
          color: "red",
        },
      },
      {
        name: "阻塞",
        type: "bar",
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        data: resultData.value["block"],
        itemStyle: {
          color: "orange",
        },
      },
    ],
  });
}
</script>
